<template>
  <div class="ui-to-top" :style="{bottom: bottom + 'px'}" v-if="shown" @click="gotoTop">
    <text class="icon ui-to-top-icon">&#xe623;</text>
  </div>
</template>
<style lang="scss">
  @import "../sass/var";
  @import "../sass/mixin";
  @import "../sass/icon";
  .ui-to-top {
    position: fixed;
    /*bottom: 30px;*/
    right: 30px;
    width: 68px;
    height: 68px;
    justify-content: center;
    align-items: center;
    border-radius: 68px;
    overflow: hidden;
    background-color: #ffffff;
    @include border(1px, solid, darken($brand-primary, 10%));
    color: #fff;
    box-shadow: 0px 0px 10px rgba(102, 102, 102, 0.62);
    z-index: 1000;
    &-icon {
      font-size: 36px;
      line-height: 36px;
      color: $brand-primary;
    }
  }
</style>
<script>
require('../include/page-xdom')
module.exports = {
  props: {
    shown: {default: false},
    bottom: {default: 120}
  },

  mixins: [
  ],

  data () {
    return {
    }
  },
  components: {},
  created () {
  },
  methods: {
    gotoTop () {
      this.$emit('click')
    }
  }
}
</script>
